<template>
  <div class="view-container" id="departmentList">
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>科室信息</span>
        </div>
        <div class="header-form">
          <!--更多-->
          <div class="header-form-item">
            <el-dropdown @command="handleCommand">
              <el-button type="default" :loading="delLoading">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-refresh-right" class="color-refresh-item" command="refresh">刷新
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-edit" class="color-edit-item" command="edit">编辑</el-dropdown-item>
                <el-dropdown-item icon="el-icon-delete" class="color-del-item" command="del">{{isBatchesDel}}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!--搜索-->
          <!--按标题查询-->
          <!--<div class="header-form-item">
            <el-button type="danger" icon="el-icon-plus" @click="toAddPage">添加</el-button>
          </div>-->
          <div class="header-form-item">
            <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
          </div>
          <!--<div class="header-form-item title-search">
            <el-input v-model.trim="department.departmentName" placeholder="部门名称" clearable/>
          </div>-->
        </div>
      </div>
    </header>

    <section>
      <el-table
        ref="table"
        :data="tableData"
        row-key="departmentId"
        border
        default-expand-all
        :tree-props="{children: 'children'}"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column sortable prop="infoTitle" label="标题" align="left"/>
        <el-table-column sortable prop="sharedZoneList" label="分享范围" align="center"/>
        <el-table-column sortable prop="infoType" label="分类" align="center"/>
        <el-table-column sortable prop="infoUse" label="发布人" align="center"/>
        <el-table-column sortable prop="" label="发布时间" align="center"/>
      </el-table>
    </section>


  </div>
</template>

<script>
  import workAPI from '@/api/workExchange/workExchange'
  export default {
    name: 'WorkExchangeKeShi',
    data() {
      return {
        tableData: [],
        multipleSelected: [],
        delLoading: false,
        work: {
          allowComment: true,
          allowTop: true,
          infoCode: "",
          infoContent: "",
          infoTitle: "",
          infoType: "",
          infoUse: "",
          shareType: 0,
          sharedZoneList: [
            0
          ]
        },
        page: {
          index: 1,
          size: 10,
          total: 0
        },
      }
    },
    created() {
      this.fetchData()
    },
    computed: {
      isBatchesDel() {
        return this.multipleSelected.length > 1 ? '批量删除' : '删除'
      }
    },
    methods: {
      handleRowClick(row, column, event) {
        this.$refs['table'].toggleRowSelection(row)
      },
      fetchData() {
        workAPI.all(this.page).then(res => {
          this.tableData = res.records
          this.page.total = res.total
        })
      },
      del() {
        if (this.multipleSelected.length === 0) {
          this.$message.warning('请选择要删除的行')
          return
        }
        if (this.delLoading) {
          return
        }
        this.$confirm('确定删除吗', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delLoading = true
          //  let-todo （复制粘贴注意事项）2、换api
          // let-fix 批量删除api没提供
          const promise = this.multipleSelected.length > 1 ? noticeAPI.multipleDelete(this.multipleSelected) : departmentAPI.delete(this.multipleSelected[0])
          promise.then(res => {
            this.delLoading = false
            if (res.success) {
              this.$message.success('删除成功')
              if (this.multipleSelected.length === this.tableData.length) {
                this.page.index = --this.page.index === 0 ? 1 : this.page.index
              }
              this.fetchData()
            } else {
              this.$message.warning('删除失败')
            }
          }).catch(err => {
            this.delLoading = false
            console.log(err)
          })
        }).catch(() => {
        })
      },
      handleSelectionChange(arr) {
        this.multipleSelected = []
        for (const val of arr) {
          this.multipleSelected.push(val.infoCode)
        }
      },
      handleCommand(command) {
        switch (command) {
          case 'edit':
            this.edit()
            break;
          case 'del':
            this.del()
            break;
          case 'refresh':
            this.refresh()
            break
          default:
        }
      },
      refresh() {
        location.reload()
      },
      handleSizeChange(val) {
        this.page.size = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.page.index = val
        this.fetchData()
      },
    }
  }
</script>

<style lang="scss">

</style>

